<template>
  <div style="background-color: #fff; padding: 80px;overflow: hidden;">
    <div class="header">
      <img :src="user.avatar" alt="" />
      <div>
        <div>
          <div style="margin-right: 10px">{{ user.name }}</div>
          <div>
            <svg
              v-if="user.sex == 1"
              t="1740207452116"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1503"
              width="28"
              height="28"
            >
              <path
                d="M948.338 87.78a47.56 47.56 0 0 0-24.462-12.687L687.218 56.036a47.73 47.73 0 0 0-6.258 95.175l124.587 12.686-161.565 164.978a409.259 409.259 0 0 0-155.477-82.49A353.621 353.621 0 0 0 65.877 519.453a364.885 364.885 0 0 0 267.378 438.045A356.58 356.58 0 0 0 761.856 684.43a363.634 363.634 0 0 0-49.493-279.154l149.049-158.663-6.258 114.233a48.81 48.81 0 0 0 43.804 50.745 48.014 48.014 0 0 0 49.494-44.43l18.773-241.095a45.511 45.511 0 0 0-18.773-38.059z m-291.84 571.05A251.62 251.62 0 0 1 351.8 849.237a257.138 257.138 0 0 1-186.482-310.954 251.335 251.335 0 0 1 304.583-190.35A265.785 265.785 0 0 1 656.498 658.83z m0 0"
                fill="#1296db"
                p-id="1504"
              ></path>
            </svg>
            <svg
              v-else
              t="1740207452116"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1503"
              width="28"
              height="28"
            >
              <path
                d="M948.338 87.78a47.56 47.56 0 0 0-24.462-12.687L687.218 56.036a47.73 47.73 0 0 0-6.258 95.175l124.587 12.686-161.565 164.978a409.259 409.259 0 0 0-155.477-82.49A353.621 353.621 0 0 0 65.877 519.453a364.885 364.885 0 0 0 267.378 438.045A356.58 356.58 0 0 0 761.856 684.43a363.634 363.634 0 0 0-49.493-279.154l149.049-158.663-6.258 114.233a48.81 48.81 0 0 0 43.804 50.745 48.014 48.014 0 0 0 49.494-44.43l18.773-241.095a45.511 45.511 0 0 0-18.773-38.059z m-291.84 571.05A251.62 251.62 0 0 1 351.8 849.237a257.138 257.138 0 0 1-186.482-310.954 251.335 251.335 0 0 1 304.583-190.35A265.785 265.785 0 0 1 656.498 658.83z m0 0"
                fill="#d4237a"
                p-id="1504"
              ></path>
            </svg>
          </div>
        </div>
        <div style="font-size: 18px">{{ user.phone }}</div>
      </div>
    </div>
    <div class="tabbar">
      <div @click="cur=1" :class="{cur:cur==1}">歌单</div>
      <div @click="cur=2" :class="{cur:cur==2}">点赞</div>
      <div @click="cur=3" :class="{cur:cur==3}">收藏</div>
    </div>
    <div style="height:30px"></div>
    <div v-if="cur==1">
       
          <div class="dzlist">
 <GedanItem v-for="v in gdList" :data='v'/>
 <div style="width:140px;height:140px;
 font-size:80px; text-align: center;
    line-height: 140px;
    border: 2px dashed #ddd;cursor: pointer;" @click="addGedan">
+
</div>
        </div>
    </div>
    <div v-if="cur==2">
        <div class="dzlist">
<GeItem v-for="v in dzList" :data='v'/>

        </div>
    </div>
    <div v-if="cur==3">
          <div class="dzlist">
<GeItem v-for="v in scList" :data='v' />
        </div>
    </div>
      <el-dialog
  title="新建歌单"
  :visible.sync="dialogVisible"
  width="400px"
  :before-close="handleClose">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
  <el-form-item prop="title" label="标题" >
    <el-input placeholder="请输入标题" v-model="ruleForm.title"></el-input>
</el-form-item>
 <el-form-item prop="biaoqian" label="标签" >
    <el-input placeholder="多个标签用,分割" v-model="ruleForm.biaoqian"></el-input>
</el-form-item>
<el-form-item prop="img"   label="封面图" >
    <el-upload
  class="avatar-uploader"
 action="/api/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  >
  <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

</el-form-item>
 <el-form-item prop="desc" label="描述" >
    <el-input  type="textarea" placeholder="请输入描述" v-model="ruleForm.desc"></el-input>
</el-form-item>
  </el-form>
  
  <span slot="footer" class="dialog-footer">
    <el-button  @click="dialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import GeItem from "@/components/GeItem"
import GedanItem from "@/components/GedanItem"
import api from "@/api/index";
export default {
    components: {
        GeItem,GedanItem
    },
  data() {
    return {
        ruleForm:{},
        dialogVisible:false,
      cur: 1,
      dzList:[],
      scList:[],
      gdList:[],
         rules: {
                    title: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }, ],
                    desc: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }, ],
                     biaoqian: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }, ],
                     img: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }, ],
                   }
    };
  },

  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  methods: {
      handleClose(done) {
      done()
      },
      handleAvatarSuccess(e){
                this.$set( this.ruleForm,'img',e.data)
            },
       submitForm(formName) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        api.addgedan({
                            ...this.ruleForm,
                            uid:this.$store.state.user.id,
                            uname:this.$store.state.user.name,
                        }).then(res=>{
                              this.$message({
                    message: '新建成功',
                    type: 'success'
                });
                this.dialogVisible=false
                api.gedanlist({uid:this.user.id}).then(res=>{
this.gdList=res.data
    })
                        })
                    }})},
    addGedan(){
      console.log("addGedan");
        this.ruleForm={}
        this.dialogVisible=true
    }
  },
  mounted() {
    api.dingcaiList({uid:this.user.id,type:1}).then(res=>{
this.dzList=res.data
    })
    api.gedanlist({uid:this.user.id}).then(res=>{
this.gdList=res.data
    })
     api.dingcaiList({uid:this.user.id,type:2}).then(res=>{
this.scList=res.data
    })
  },
};
</script>

<style lang="scss" scoped>
.dzlist{
   
    width: 1080px;
    display: flex;
        flex-wrap: wrap;
    >div{
        margin-bottom: 40px;
        margin-right: 40px;
    }
}
::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.tabbar {
  margin-top: 40px;
  display: flex;
  > div {
    margin-right: 20px;
    font-size: 16px;
    height: 16px;
    font-size: 16px;
    cursor: pointer;
    color: gray;
    position: relative;
    &.cur {
      color: black;
      font-weight: bold;
      &::after {
        content: "";
        background-color: rgb(199, 12, 12);
        height: 2px;
        width: 18px;
        position: absolute;
        top: 23px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
.header {
  display: flex;
  img {
    width: 160px;
    border-radius: 50%;
    height: 160px;
  }
  > div {
    margin-left: 20px;
    padding-top: 20px;

    > div:nth-child(1) {
      margin-right: 10px;
      font-weight: bold;
      font-size: 22px;
    }
    > div {
      display: flex;
    }
  }
}
</style>